<template>
  <view class="pub-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="cancel" @click="goBack">取消</text>
      <text class="title">发布动态</text>
      <button
        class="publish-btn"
        :class="{ active: canPublish }"
        :disabled="!canPublish"
        @click="publishState"
      >
        <text class="btn-text">发布</text>
      </button>
    </view>

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 标题输入框 -->
      <input
        class="title-input"
        v-model="title"
        placeholder="请输入标题..."
        maxlength="50"
        placeholder-class="placeholder"
      />
      <view class="divider"></view>

      <textarea
        class="content-input"
        v-model="content"
        placeholder="分享新鲜事..."
        maxlength="500"
        placeholder-class="placeholder"
      />

      <!-- 字数统计 -->
      <text class="word-count">{{ content.length }}/500</text>

      <!-- 视频上传区域 -->
      <view class="media-area">
        <view class="media-list">
          <!-- 视频展示 -->
          <view class="media-item video-item" v-if="videoUrl">
            <video :src="videoUrl" class="video-preview"></video>
            <view class="delete-btn" @click="deleteVideo">×</view>
          </view>

          <!-- 上传按钮 -->
          <view class="upload-wrapper" v-if="!videoUrl">
            <view class="upload-btn" @click="chooseVideo">
              <text class="iconfont icon-add">+</text>
              <text class="upload-text">上传视频</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { upload, creatediscussion } from '@/api/system';
import config from '@/config';
export default {
  data() {
    return {
      title: '', // 添加标题字段
      content: '', // 动态内容
      videoUrl: '', // 视频地址
    };
  },
  computed: {
    canPublish() {
      return (this.content.trim() || this.videoUrl) && this.title.trim(); // 修改发布条件
    },
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 选择视频
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 60,
        camera: 'back',
        success: (res) => {
          // 显示上传中提示
          uni.showLoading({
            title: '上传中...',
            mask: true,
          });

          // 获取token
          const token = uni.getStorageSync('App-Token');

          // 构建上传参数
          const uploadTask = uni.uploadFile({
            url: config.baseUrl + '/common/upload',
            filePath: res.tempFilePath,
            name: 'file',
            header: {
              Authorization: 'Bearer ' + token, // 添加token到请求头
            },
            success: (uploadRes) => {
              const result = JSON.parse(uploadRes.data);
              if (result.code === 200) {
                console.log(result);
                this.videoUrl = result.url;
                uni.showToast({
                  title: '上传成功',
                  icon: 'success',
                });
              } else {
                uni.showToast({
                  title: '上传失败',
                  icon: 'none',
                });
              }
            },
            fail: (err) => {
              console.error('上传失败:', err);
              uni.showToast({
                title: '上传失败，请重试',
                icon: 'none',
              });
            },
            complete: () => {
              uni.hideLoading();
            },
          });

          // 监听上传进度
          uploadTask.onProgressUpdate((res) => {
            console.log('上传进度:', res.progress);
          });
        },
      });
    },

    // 删除视频
    deleteVideo() {
      this.videoUrl = '';
    },

    // 修改发布动态方法
    publishState() {
      if (!this.title.trim()) {
        uni.showToast({
          title: '请输入标题',
          icon: 'none',
        });
        return;
      }
      if (!this.content && !this.videoUrl) {
        uni.showToast({
          title: '请输入内容或上传视频',
          icon: 'none',
        });
        return;
      }
      uni.showLoading({
        title: '发布中...',
      });
      let obj = {
        views: 0,
        title: this.title,
        content: this.content,
        videoUrl: this.videoUrl,
      };
      creatediscussion(obj)
        .then((res) => {
          if (res.code === 200) {
            uni.showToast({
              title: '发布成功',
              icon: 'success',
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          } else {
            uni.showToast({
              title: res.msg || '发布失败',
              icon: 'none',
            });
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.pub-container {
  min-height: 100vh;
  background-color: #f6f7f9;

  .nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 32rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eef0f4;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);

    .cancel {
      font-size: 28rpx;
      color: #666;
      padding: 12rpx 24rpx;
      transition: all 0.3s;

      &:active {
        opacity: 0.7;
      }
    }

    .title {
      font-size: 34rpx;
      font-weight: 600;
      color: #333;
    }

    .publish-btn {
      min-width: 160rpx;
      height: 72rpx;
      font-size: 30rpx;
      color: #fff;
      background: #e0e0e0;
      border-radius: 36rpx;
      padding: 0 36rpx;
      border: none;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;

      &::after {
        display: none;
      }

      .btn-text {
        position: relative;
        z-index: 1;
        font-weight: 500;
        letter-spacing: 2rpx;
      }

      &.active {
        background: #007aff;
        box-shadow: 0 6rpx 20rpx rgba(0, 122, 255, 0.25);

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0) 100%
          );
          z-index: 0;
        }

        &:active {
          transform: translateY(2rpx);
          box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
        }
      }

      &:not(.active) {
        opacity: 0.8;
        cursor: not-allowed;
      }
    }
  }

  .content-area {
    background-color: #fff;
    margin: 24rpx;
    border-radius: 16rpx;
    padding: 32rpx;
    position: relative;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

    .title-input {
      width: 100%;
      height: 88rpx;
      font-size: 34rpx;
      font-weight: 600;
      padding: 0;
      color: #333;
    }

    .divider {
      height: 1rpx;
      background-color: #eef0f4;
      margin: 24rpx 0;
    }

    .content-input {
      margin-top: 24rpx;
      width: 100%;
      height: 240rpx;
      font-size: 30rpx;
      line-height: 1.8;
      padding: 0;
      color: #333;
    }

    .placeholder {
      color: #bbb;
      font-weight: normal;
    }

    .word-count {
      position: absolute;
      right: 32rpx;
      top: 320rpx;
      font-size: 24rpx;
      color: #999;
    }

    .media-area {
      margin-top: 60rpx;

      .media-list {
        .media-item {
          position: relative;
          width: 100%;
          height: 400rpx;
          border-radius: 16rpx;
          overflow: hidden;
          background-color: #f5f7fa;
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);

          .video-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .delete-btn {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 48rpx;
            height: 48rpx;
            line-height: 44rpx;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.7);
            color: #fff;
            border-radius: 50%;
            font-size: 32rpx;
            transition: all 0.3s;

            &:active {
              transform: scale(0.9);
            }
          }
        }

        .upload-wrapper {
          width: 100%;
          height: 320rpx;

          .upload-btn {
            width: 100%;
            height: 100%;
            background-color: #f5f7fa;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 16rpx;
            border: 2rpx dashed #ddd;
            transition: all 0.3s;

            &:active {
              background-color: #eef0f4;
            }

            .icon-add {
              font-size: 64rpx;
              color: #999;
              margin-bottom: 24rpx;
            }

            .upload-text {
              font-size: 28rpx;
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style>
